<template>
  <BoTable
    :columns="columns"
    :request="_request"
    ref="tableRef"
    height="auto"
    :row-selection="rowSelection"
    row-key="id"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
        <Button @click="onDelete(null)" :disabled="!selectKeys.length">
          删除
        </Button>
      </Space>
    </template>
  </BoTable>
  <FormModal :columns="item"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, Modal, Space, Switch, message } from 'ant-design-vue';

const tableRef = ref();
const selectKeys = ref<any[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values, all) {
      selectKeys.value = values;
    },
  };
});

const _request = () => {
  return {
    total: 2,
    rows: [
      {
        id: 0,
        project: '1',
        code3: 0,
        code2: 1,
      },
      {
        id: 1,
        project: '1',
        code3: 0,
        code2: 0,
      },
    ],
  };
};
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'index',
    customRender({ renderIndex, index }) {
      return renderIndex + 1;
    },
    hideInSearch: true,
  },
  {
    title: '设备大类',
    dataIndex: 'name',
    hideInSearch: true,
  },
  {
    title: '设备类型',
    dataIndex: 'type',
  },
  {
    title: '启用状态',
    dataIndex: 'code2',
    valueType: 'select',
    hideInTable: true,
    valueEnum: {
      1: {
        text: '启用',
        status: 'success',
      },
      0: {
        text: '未启用',
        status: 'error',
      },
    },
  },
  {
    title: '是否启用',
    dataIndex: 'code2',
    hideInSearch: true,
    customRender: ({ text }) => {
      return (
        <Switch
          checkedValue={1}
          unCheckedChildren={'未启用'}
          checkedChildren={'启用'}
          unCheckedValue={0}
          v-model:checked={text}
          onChange={onChange}
        ></Switch>
      );
    },
  },
  {
    title: '说明',
    dataIndex: 'remark',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    valueType: 'datePicker',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    actions: [
      {
        text: '编辑',
        onClick(record) {
          onEdit(record);
        },
      },
      {
        text: '删除',
        onClick(record) {
          onDelete(record);
        },
      },
    ],
  },
]);

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const onEdit = async (record) => {
  open({
    title: '详情',
    request: async (params: any) => {
      message.success('操作成功!');
    },
    defaultValue: {},
  });
};

const onDelete = async (record) => {
  const ids = record ? record.id : selectKeys.value.join(',');
  Modal.confirm({
    title: '系统提示',
    content: `确定删除当前选中项数据吗?`,
    onOk: async () => {
      message.success('操作成功!');
      tableRef.value.refresh();
    },
  });
};
const onAdd = () => {
  open({
    title: '新增',
    request: async (params: any) => {
      message.success('操作成功!');
    },
    defaultValue: {},
  });
};
const item = computed<BoFormProps['columns']>(() => [
  {
    title: '类型',
    dataIndex: 'code4',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入',
    },
  },
  {
    title: '说明',
    dataIndex: 'code5',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: false,
          message: '请输入',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入',
    },
  },
  {
    title: '是否启用',
    dataIndex: 'code6',
    valueType: 'radio',
    fieldProps: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  },
]);

const onChange = (status) => {
  const text = status == '1' ? '启用' : '停用';
  Modal.confirm({
    title: '系统提示',
    content: `确定${text}当前项吗?`,
    onOk: async () => {
      message.success('操作成功!');
      tableRef.value.refresh();
    },
  });
  tableRef.value.refresh();
};
</script>

<style lang="scss" scoped>
.custom_title {
  padding-left: 10px;
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 3px;
    height: 10px;
    background-color: #40deff;
  }
}
</style>
<route lang="json">
{
  "name": "device-type",
  "meta": { "title": "设备类型管理" }
}
</route>
